<template>
  <div class="sidebar-container" :class="{ 'is-collapsed': menuStore.isCollapse }">
    <div class="logo-container">
      <h1 class="logo">{{ menuStore.isCollapse ? '' : 'Vue3 架构' }}</h1>
      <div class="collapse-btn" @click="toggleCollapse">
        <SvgIcon v-if="menuStore.isCollapse" name="sidebar-menu-open" color="#3978e9" size="16px" />
        <SvgIcon v-else name="sidebar-menu-close" color="#3978e9" size="16px" />
      </div>
    </div>
    <el-scrollbar>
      <el-menu
        ref="menuRef"
        :default-active="menuStore.activeMenu"
        :default-openeds="defaultOpeneds"
        :collapse="menuStore.isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :active-text-color="variables.menuActiveText"
        :unique-opened="false"
        :collapse-transition="true"
        router
        class="custom-menu"
      >
        <menu-item v-for="route in routes" :key="route.path" :item="route" />
      </el-menu>
    </el-scrollbar>
    <div class="sidebar-footer">
      <theme-switcher v-if="!menuStore.isCollapse" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, onMounted, ref, watch } from 'vue';
import { useRoute } from 'vue-router';
import MenuItem from './MenuItem.vue';
import { useUserStore } from '@/store/modules/user';
import { useMenuStore } from '@/store/modules/menu';
import ThemeSwitcher from '@/components/ThemeSwitcher.vue';

// 获取菜单状态
const menuStore = useMenuStore();
const route = useRoute();
const menuRef = ref();

// 获取路由列表
const userStore = useUserStore();
const routes = computed(() => {
  return userStore.routes;
});

// 计算默认展开的菜单
const defaultOpeneds = computed(() => {
  const openeds: string[] = [];
  const currentPath = route.path;

  // 递归查找需要展开的菜单路径
  const findOpenedMenus = (routes: any[], basePath = '') => {
    routes.forEach(routeItem => {
      if (routeItem.children && routeItem.children.length > 0) {
        // 构建完整路径
        let fullPath = '';
        if (basePath) {
          fullPath = basePath + '/' + routeItem.path;
        } else {
          fullPath = '/' + routeItem.path;
        }

        // 清理路径，移除多余的斜杠
        const cleanPath = fullPath.replace(/\/+/g, '/');

        // 如果当前路径包含这个菜单路径，则需要展开
        if (currentPath.startsWith(cleanPath) && cleanPath !== currentPath) {
          openeds.push(cleanPath);
        }

        // 递归检查子菜单
        findOpenedMenus(routeItem.children, cleanPath);
      }
    });
  };

  findOpenedMenus(routes.value);
  return openeds;
});

// 切换折叠状态
const toggleCollapse = () => {
  menuStore.toggleCollapse();
};

// 初始化菜单状态
onMounted(() => {
  menuStore.initMenuState();
  menuStore.setActiveMenu(route.path);
});

// 监听路由变化，更新当前激活的菜单
watch(
  () => route.path,
  path => {
    menuStore.setActiveMenu(path);
  },
  { immediate: true }
);

// 获取CSS变量
const variables = computed(() => {
  return {
    menuBg: 'var(--theme-menu-bg)',
    menuText: 'var(--theme-text-color)',
    menuActiveText: 'var(--theme-color-primary)'
  };
});
</script>

<style lang="scss" scoped>
.sidebar-container {
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: var(--theme-menu-bg);
  transition: width 0.3s ease;
  position: relative;
  overflow: hidden;

  &.is-collapsed {
    .logo-container {
      padding: 0;
      justify-content: center;

      .logo {
        font-size: 16px;
      }
    }

    .sidebar-footer {
      padding: 10px 0;
      justify-content: center;
    }

    :deep(.el-menu) {
      &.el-menu--collapse {
        width: 64px;

        .el-menu-item,
        .el-sub-menu__title {
          padding: 0 20px !important;
        }
      }

      .el-tooltip__trigger {
        .el-sub-menu__icon-arrow {
          display: none;
        }
      }

      .el-sub-menu__title span,
      .el-menu-item span {
        display: inline-block;
        opacity: 0;
        width: 0;
        overflow: hidden;
      }
    }
  }

  .logo-container {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 16px;
    transition: padding 0.3s ease;
    border-bottom: 1px solid var(--theme-sidebar-header-bb-color);
    .logo {
      color: var(--theme-color-primary);
      font-size: 18px;
      font-weight: bold;
      white-space: nowrap;
      overflow: hidden;
      transition: font-size 0.3s ease;
    }
  }

  .sidebar-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    border-top: 1px solid var(--theme-border-color);
    margin-top: auto;
    transition: padding 0.3s ease;
  }

  .collapse-btn {
    cursor: pointer;
  }
}

.custom-menu {
  border-right: none !important;

  &.el-menu--collapse {
    width: 64px;
  }
}

:deep(.el-menu-item) {
  transition:
    background-color 0.3s ease,
    border-right-color 0.3s ease;
  border-right: 4px solid transparent;

  &:hover {
    background-color: rgba(57, 120, 233, 0.07) !important;
  }

  &.is-active {
    background: linear-gradient(
      270deg,
      rgba(57, 120, 233, 0.2) 0%,
      rgba(57, 120, 233, 0.05) 100%
    ) !important;
    border-right-color: var(--theme-color-primary);
  }
}

:deep(.el-menu) {
  transition: width 0.3s ease;
}

:deep(.el-sub-menu) {
  &.is-opened {
    > .el-sub-menu__title {
      color: var(--theme-color-primary) !important;
    }

    > .el-menu {
      display: block !important;
    }
  }
}

:deep(.el-sub-menu__title) {
  &:hover {
    background-color: rgba(57, 120, 233, 0.07) !important;
  }
}

:deep(.el-sub-menu__title span),
:deep(.el-menu-item span) {
  white-space: nowrap;
  display: inline-block;
  transition:
    opacity 0.3s ease,
    width 0.3s ease;
}

:root[data-theme='dark'] {
  :deep(.el-menu-item:hover),
  :deep(.el-sub-menu__title:hover) {
    background-color: rgba(75, 180, 255, 0.1) !important;
  }

  :deep(.el-menu-item.is-active) {
    background: linear-gradient(
      270deg,
      rgba(75, 180, 255, 0.2) 0%,
      rgba(75, 180, 255, 0.05) 100%
    ) !important;
    border-right-color: var(--theme-color-primary);
  }

  :deep(.el-sub-menu.is-opened > .el-sub-menu__title) {
    color: var(--theme-color-primary-dark) !important;
  }
}
</style>
